<template>
	<view class="prompt-box" v-if="visible" @touchmove="true">
		<view class="prompt">
			<view class="prompt-top">
				<text class="prompt-title">{{ title }}</text>
				<input v-if="!isMutipleLine" class="prompt-input" :style="inputStyle" :maxlength="maxlength" :type="inputType" :placeholder="placeholder" v-model="value" />
				<textarea v-else class="prompt-input" :style="inputStyle" type="text" :placeholder="placeholder" v-model="value"></textarea>
			</view>
			<slot></slot>
			<view class="prompt-buttons">
				<button class="prompt-cancle" :style="'color:' + mainColor" @click="close">取消</button>
				<button class="prompt-confirm" :style="'background:' + mainColor" @click="confirm">确定</button>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		errorToShow
	} from '@/config/common.js';
export default {
	props: {
		visible: {
			type: Boolean,
			default: false,
			required: true
		},
		title: {
			type: String,
			default: '提示'
		},
		placeholder: {
			type: String,
			default: '请输入内容'
		},
		mainColor: {
			type: String,
			default: '#e74a39'
		},
		defaultValue: {
			type: String,
			default: ''
		},
		inputStyle: {
			type: String,
			default: ''
		},
		inputType: {
			type: String,
			default: 'text'
		},
		maxlength: {
			type: Number,
			default: 5
		},
		// 是否多行输入的textarea
		isMutipleLine: {
			type: Boolean,
			default: false
		}
	},
	data() {
		return {
			value: ''
		};
	},
	watch: {
		visible(val) {
			if (val) {
				this.value = this.defaultValue;
			}
		}
	},
	mounted() {
		this.value = this.defaultValue === 'true' ? '' : this.defaultValue;
	},
	methods: {
		close() {
			this.$emit('update:visible', false);
		},
		confirm() {
			if(this.value >5) {
				errorToShow('最多只能发五张~');
			}else{
				this.$emit('confirm', this.value);
				this.value = '';
			}
			
		}
	}
};
</script>

<style scoped>
view,
button,
input {
	box-sizing: border-box;
}

.prompt-box {
	position: fixed;
	left: 0;
	top: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100vh;
	background: rgba(0, 0, 0, 0.2);
	transition: opacity 0.2s linear;
}

.prompt {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
	width: 600upx;
	min-height: 300upx;
	background: white;
	border-radius: 20upx;
	overflow: hidden;
}

.prompt-top {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
}

.prompt-title {
	margin: 20upx 0;
	color: #333;
}

.prompt-input {
	width: 520upx;
	min-height: 72upx;
	padding: 8upx 16upx;
	border: 2upx solid #ddd;
	border-radius: 8upx;
	font-size: 28upx;
	text-align: left;
}

.prompt-buttons {
	display: flex;
	width: 100%;
	box-shadow: 0 0 2upx 2upx #eee;
}

.prompt-buttons button:after {
	border-radius: 0;
}

button {
	width: 50%;
	background: white;
	border-radius: 0;
}

.prompt-cancle {
	background: white;
}

.prompt-confirm {
	color: white;
}
</style>
